<script setup lang="ts">
import { ref } from "vue";
import Searchbox from "@/views/components/searchbox/Searchbox.vue";
import CustomComponent from "@/views/configs/sysConfig/component/custom.vue";
import BaseComponent from "@/views/configs/sysConfig/component/base.vue";

defineOptions({
  name: "sysConfig"
});

const selected = ref(0);

function tabClick({ index }) {
  selected.value = index;
}

const listComponents = [
  {
    key: "BaseComponent",
    title: "基础配置",
    component: BaseComponent
  },
  {
    key: "CustomComponent",
    title: "私有化配置",
    component: CustomComponent
  },
];

</script>

<template>
  <el-card shadow="never">
    <el-tabs @tab-click="tabClick" >
      <template v-for="(item, index) of listComponents" :key="item.key">
        <el-tab-pane :lazy="true">
          <template #label>
            <span
              v-tippy="{
                maxWidth: 'none',
                content: `${item.title}`
              }"
            >
              {{ item.title }}
            </span>
          </template>
          <keep-alive>
            <component :is="item.component" :key="item.key" v-show="selected == index" />
          </keep-alive>
        </el-tab-pane>
      </template>
    </el-tabs>

  </el-card>
</template>

<style scoped lang="scss">

</style>


